<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
		
	<title>申请退款</title>
	<link rel="stylesheet" href="../css/mui.min.css"/>
	<link rel="stylesheet" href="../css/common.css" />
	<link rel="stylesheet" href="../iconfont/iconfont.css" />
	<style>
		.mui-btn-block {
		    padding: 8px 0;
		    background: #fc3a2e;
		}
		
		.apply-list .mui-card {
			box-shadow: 3px 3px 5px #DCDCDC;
		}
		
		.apply-sub {
			font-size: 12px;
			padding-left: 5px;
			color: #555;
		}
		
		.apply-img img {
			width: 65px;
			height: 70px;
		}
		.apply-tjtp {
			width: 50px!important;
			margin-top: 5px;
			margin-right: 5px;
			height: 50px!important;
		}
		.apply-images .icon-close {
			position: absolute;
			top: -25px;
			right: -20px;
			padding: 15px;
		}
		
		input[type=number] {
			height: 22px;
		}
		
		input[type=text] {
			height: 22px;
		}
		
		.active-tuikuanleixing {
			font-weight: 900;
		}
		
		.tuikuanyuanyin {
			position: relative;
		}
		
		.tuikuanyuanyin-xiala .mui-card{
			box-shadow: 3px 3px 5px #DCDCDC;
		}
		.tuikuanyuanyin-xiala {
			position: absolute;
			right: 0;
			top: 88px;
			z-index: 10;
			font-size: 13px;
			display: none;
		}
	</style>
</head>
<body>
	<!-- 顶部导航 开始 -->
	<header class="header mui-bar mui-bar-nav bar mui-text-center">
		<a class="mui-pull-left mui-action-back pad-h-md">
			<i class="iconfont icon-back"></i>
		</a>
		<a class="title">申请退款</a>
	</header>
	<!-- 顶部导航 结束 -->
	
	<div class="content">
		<div class="apply-list">
			<div class="pad-v pad-h-md"><strong>退款类型</strong></div>
			<div class="mui-card tuikuanleixing">
				<ul class="mui-table-view">
					<li class="mui-table-view-cell mui-input-row mui-radio active-tuikuanleixing">
						<label>我要退款</label>
						<input name="service-type" type="radio" value="1" class="mui-hidden" checked="checked">
					</li>
					<li class="mui-table-view-cell mui-input-row mui-radio">
						<label>我要退款退货</label>
						<input name="service-type" type="radio" value="2" class="mui-hidden">
					</li>
				</ul>
			</div>
		</div>
		<div class="apply-list tuikuanyuanyin" name="tuikuanyuanyin">
			<div class="pad-v pad-h-md"><strong>退款原因</strong></div>
			<div class="mui-card">
				<ul class="mui-table-view">
					<li class="mui-table-view-cell">
						<span class="tuikuanyuanyin-info">请选择退款原因</span>
						<i class="iconfont icon-unfold mui-pull-right"></i>
					</li>
				</ul>
			</div>
			<!--退款原因 下拉 开始-->
			<div class="tuikuanyuanyin-xiala">
				<div class="mui-card">
					<ul class="mui-table-view apply-select">
						<li class="mui-table-view-cell pad-v-sm pad-h mui-input-row mui-radio">
							<label>商品需要维修</label>
							<input name="problem" type="radio" value="{{item.id}}" class="mui-hidden">
						</li>
					</ul>
				</div>
			</div>
			<!--退款原因 下拉 结束-->
		</div>
		<div class="apply-list">
			<div class="pad-v pad-h-md"><strong>退款金额</strong></div>
			<div class="mui-card">
				<ul class="mui-table-view">
					<li class="mui-table-view-cell">
						<input class="no-bdr no-pad no-mgn" name="tuikuanjine" type="number" placeholder="请输入退款金额" />
					</li>
				</ul>
			</div>
		</div>
		<div class="apply-list">
			<div class="pad-v pad-h-md"><strong>退款说明</strong><span class="apply-sub">(可不填)</span></div>
			<div class="mui-card">
				<ul class="mui-table-view">
					<li class="mui-table-view-cell">
						<textarea class="no-pad no-bdr no-mgn" name="description" rows="3" placeholder="请输入退款说明"></textarea>
					</li>
					<li class="mui-table-view-cell apply-img">
						<div class="mui-row apply-images">
							<div class="mui-col-xs-3 mui-text-center btn-add-image">
								<img class="apply-tjtp" src="../image/tianjiatupian.png" align="middle">
							</div>
						</div>
						<span class="text-gray pad-v">上传凭证，最多3张。</span>
					</li>
				</ul>
			</div>
		</div>
		<div class="apply-list">
			<div class="pad-v pad-h-md"><strong>联系方式</strong></div>
			<div class="mui-card">
				<ul class="mui-table-view">
					<li class="mui-table-view-cell">
						<input class="no-bdr no-pad no-mgn" name="lianxifangshi" type="number" placeholder="请输入您正确的联系方式"/>
					</li>
				</ul>
			</div>
		</div>
		<div class="apply-btn pad-h pad-v-lg">
			<div class="mui-content">
			    <div class="mui-content-padded">
			        <button type="button" class="mui-btn mui-btn-danger mui-btn-block btn-submit" data-private="member.after.sale.html">提交申请</button>
			    </div>
			</div>
		</div>
	</div>	
	
	<!--问题模板 开始-->
	<script type="text/template" id="tpl-problem">
		{{each data as item}}
		<li class="mui-table-view-cell pad-v-sm pad-h mui-input-row mui-radio">
			<label>{{item.name}}</label>
			<input type="radio" name="problem" value="{{item.id}}" class="mui-hidden">
		</li>
		{{/each}}
	</script>
	<!--问题模板 结束-->
	
	<!--上传图片模板 开始-->
	<script type="text/template" id="tpl-image">
		{{each data as item}}
		<div class="mui-col-xs-3 mui-text-center image-item" data-path="{{item}}">
			<img src="{{item | image}}" />
			<i class="icon iconfont icon-close"></i>
		</div>
		{{/each}}
	</script>
	<!--上传图片模板 结束-->
	
	<script type="text/javascript" src="../js/mui.min.js" ></script>
	<script type="text/javascript" src="../js/jquery.min.js" ></script>
	<script type="text/javascript" src="../js/template.js" ></script>
	<script type="text/javascript" src="../js/app.js" ></script>
	<script type="text/javascript" src="after.sale.apply.refound.js" ></script>
	<script>
		$(".tuikuanleixing ul li").on("tap", function() {
			$(this).addClass("active-tuikuanleixing").siblings("li").removeClass("active-tuikuanleixing")
		})
//		$(".tuikuanyuanyin").on("tap", function() {
//			$(".tuikuanyuanyin-xiala").slideToggle("normal");
//		})
		$(".tuikuanyuanyin-xiala li").on("tap", function() {
			var a = $(this).text();
			$(".tuikuanyuanyin-info").text(a);
			$(".tuikuanyuanyin-xiala").slideToggle();
		})
	</script>
</body>
</html>